<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>NinePatch</title>
  </head>

  <body>
    <canvas width="750" height="1000" id="canvas" style="width: 100%"></canvas>
    <script src="https://cdn.bootcdn.net/ajax/libs/pixi.js/4.8.7/pixi.min.js"></script>

    <script src="/dist/cdn/EVA.js"></script>
    <script src="/dist/cdn/EVA.rendererAdapter.js"></script>
    <script src="/dist/cdn/EVA.plugin.renderer.js"></script>
    <script src="/dist/cdn/EVA.plugin.renderer.ninePatch.js"></script>
    <script>
      const {Game, GameObject, resource, RESOURCE_TYPE} = EVA;
      const {RendererSystem} = EVA.plugin.renderer;
      const {NinePatch, NinePatchSystem} = EVA.plugin.renderer.ninePatch;

      resource.addResource([
        {
          name: 'nine',
          type: RESOURCE_TYPE.IMAGE,
          src: {
            image: {
              type: 'png',
              url: 'https://img.alicdn.com/tfs/TB17uSKkQ9l0K4jSZFKXXXFjpXa-363-144.png',
            },
          },
          preload: false,
        },
      ]);

      const game = new Game({
        systems: [
          new RendererSystem({
            canvas: document.querySelector('#canvas'),
            width: 750,
            height: 1000,
            backgroundColor: 0xffffff,
          }),
          new NinePatchSystem(),
        ],
      });

      const patch = new GameObject('patch', {
        size: {width: 360, height: 145},
        origin: {x: 0, y: 0},
        position: {
          x: 10,
          y: 10,
        },
        anchor: {
          x: 0,
          y: 0,
        },
      });
      const ninePatch = patch.addComponent(
        new NinePatch({
          resource: 'nine',
          leftWidth: 100,
          topHeight: 40,
          rightWidth: 40,
          bottomHeight: 40,
        }),
      );

      const patch1 = new GameObject('patch1', {
        size: {width: 660, height: 345},
        origin: {x: 0, y: 0},
        position: {
          x: 10,
          y: 300,
        },
        anchor: {
          x: 0,
          y: 0,
        },
      });

      const ninePatch1 = patch1.addComponent(
        new NinePatch({
          resource: 'nine',
          leftWidth: 100,
          topHeight: 40,
          rightWidth: 40,
          bottomHeight: 40,
        }),
      );

      game.scene.addChild(patch);
      game.scene.addChild(patch1);
    </script>
  </body>
</html>
